<html lang="en">

<head th:include="templates/common :: header" />

<body>
	<div class="container" style="margin-top: 40px;">
		<div th:include="templates/common :: menu" ></div>	
		
		<div class="alert alert-success" th:if="${not #strings.isEmpty(status) and status == 'students.create.success'}">
			<a class="close">x</a>
			<p class="status" th:if="${not #strings.isEmpty(status)}" th:utext="#{${status}}">Status</p>
		</div>
		
		<div class="alert alert-danger" th:if="${not #strings.isEmpty(status) and status == 'students.create.failure'}">
			<a class="close">x</a>
			<p class="status" th:if="${not #strings.isEmpty(status)}" th:utext="#{${status}}">Status</p>
		</div>

		<div class="alert alert-success" th:if="${not #strings.isEmpty(status) and status == 'students.update.success'}">
			<a class="close">x</a>
			<p class="status" th:if="${not #strings.isEmpty(status)}" th:utext="#{${status}}">Status</p>
		</div>
				
		<div class="alert alert-danger" th:if="${not #strings.isEmpty(status) and status == 'students.update.failure'}">
			<a class="close">x</a>
			<p class="status" th:if="${not #strings.isEmpty(status)}" th:utext="#{${status}}">Status</p>
		</div>
		
		<div class="alert alert-success" th:if="${not #strings.isEmpty(status) and status == 'students.delete.success'}">
			<a class="close">x</a>
			<p class="status" th:if="${not #strings.isEmpty(status)}" th:utext="#{${status}}">Status</p>
		</div>
		
		<div class="alert alert-danger" th:if="${not #strings.isEmpty(status) and status == 'students.delete.failure'}">
			<a class="close">x</a>
			<p class="status" th:if="${not #strings.isEmpty(status)}" th:utext="#{${status}}">Status</p>
		</div>
		
		<div class="alert alert-danger" th:if="${not #strings.isEmpty(status) and status == 'app.user.not.found'}">
			<a class="close">x</a>
			<p class="status" th:if="${not #strings.isEmpty(status)}" th:utext="#{${status}}">Status</p>
		</div>
		
		<div class="alert alert-danger" th:if="${not #strings.isEmpty(status) and status == 'students.constraint.exception'}">
			<a class="close">x</a>
			<p class="status" th:if="${not #strings.isEmpty(status)}" th:utext="#{${status}}">Status</p>
		</div>
			
 		<div class="panel panel-primary" >		
	 		<div class="panel-body">	
	 			<table class="table">
		            <tbody> 
		            	<tr>
		                	<td style="width:50%;float:left;border-top:none;">
				           		<form id="studentsBrowsingForm" th:object="${groupDto}" action="#" th:action="@{/users/students/group/}" method="post" class="form-inline">
									<select id="allGroups" th:field="*{id}" class="chzn-select btn-block" style="width:40%; margin-right:10px;float:left;">										
										<option th:each="group : ${allGroups}" th:value="${group.id}" th:text="${group.groupName + '('+ group.numericGroupName+')'}">Access Type 1</option>
									</select>			                   
							        <button id="submitGroups" type="submit" class="btn btn-primary" th:inline="text" style="float:left;"> 
										<i class="glyphicon glyphicon-search" style="margin-right:5px;"/>[[#{app.browse}]]
									</button>				                  
						        </form>		
		                    </td>
		                	<td style="text-align: center !important; width:25%;border-top:none;">
	                			<a class="btn btn-primary" th:href="@{/users/students/create}" style="float:right;" th:inline="text">
									<i class="glyphicon glyphicon-plus-sign" style="margin-right:5px;"/>[[#{students.create}]]
								</a>
		                    </td>
		                </tr>
		        	</tbody>
	       		</table>				
			</div>
		</div>
		
		<table th:if="${not #lists.isEmpty(users)}" class="table table-bordered table-striped table-condensed">
			<thead>
				<tr>
					<th scope="col" style="text-align: center !important;">						
						<a th:href="@{/users/students/group/(order=${order} , column='login')}" th:text="#{students.table.username}"/>						
					</th>
					<th scope="col" style="text-align: center !important;">						
						<a th:href="@{/users/students/group/(order=${order} , column='firstName')}" th:text="#{students.table.firstname}"/>						
					</th>
					<th scope="col" style="text-align: center !important;">						
						<a th:href="@{/users/students/group/(order=${order} , column='lastName')}" th:text="#{students.table.lastname}"/>						
					</th>					
					<th scope="col" style="text-align: center !important;">						
						<a th:href="@{/users/students/group/(order=${order} , column='email')}" th:text="#{students.table.email}"/>						
					</th>
					<th scope="col" style="text-align: center !important;">						
						<a th:href="@{/users/students/group/(order=${order} , column='albumNumber')}" th:text="#{students.table.album.number}"/>						
					</th>
					<th scope="col" style="text-align: center !important;">						
						<a th:href="@{/users/students/group/(order=${order} , column='status')}" th:text="#{account.status}"/>						
					</th>
					<th scope="col" style="text-align: center !important;"></th>
				</tr>
			</thead>
			<tbody>
				<tr th:each="student : ${users}">
					<td th:text="${student.userName}" style="text-align: center; vertical-align: middle;"></td>
					<td th:text="${student.firstName}" style="text-align: center; vertical-align: middle;"></td>
					<td th:text="${student.lastName}" style="text-align: center; vertical-align: middle;"></td>
					<td th:text="${student.email}" style="text-align: center; vertical-align: middle;"></td>							
					<td th:text="${student.albumNumber}" style="text-align: center; vertical-align: middle;"></td>
					<td style="text-align: center; vertical-align: middle;"> 
						<i th:class="${ #bools.isTrue(student.status)} ? 'glyphicon glyphicon-eye-open' : 'glyphicon glyphicon-eye-close'"/>
					</td>							
					<td style="text-align: center; vertical-align: middle;">
						<a class="btn btn-success btn-small" th:href="@{/users/__${student.id}__/profile}" th:inline="text">
							<i class="glyphicon glyphicon-list-alt icon-white" style="margin-right:5px;"/>[[#{menu.profile}]]
						</a>
						<a id="studentsEditLink" class="btn btn-primary btn-small" href="#modalEdit" th:href="@{/users/students/edit/__${student.id}__}" sec:authorize="hasRole('Administrator')" th:inline="text">
							<i class="icon-edit icon-white" style="margin-right:5px;"/>[[#{app.button.edit}]]
						</a>
						<a id="studentsDeleteLink" class="btn btn-danger btn-small" href="#" th:href="@{/users/students/delete/__${student.id}__}" sec:authorize="hasRole('Administrator')" th:inline="text" >
							<i class="icon-remove-sign icon-white" style="margin-right:5px;"/>[[#{app.button.delete}]]
						</a>
					</td>
				</tr>
			</tbody>
		</table>		
	</div>	
	
	<script type="text/javascript"> 
	 $(document).ready(function() {
	    $('.chzn-select').select2({});
	 });
	</script>	
</body>
</html>